  <template>
  <div>
    <!-- 此组件两个表 -->
    <!-- 左表 -->
    <div>
      <!-- 头部 -->
      <!-- <div class="userHeader"> -->
        <!-- 搜索栏 -->
        <!-- <div class="searchSlot">
          <slot name="searchSlotLeft"></slot>
        </div> -->
        <!-- 添加附加功能栏 -->
        <!-- <div class="btnSlot">
          <slot name="btnSlotLeft"></slot>
        </div> -->
        <!-- 选择状态显示栏 -->
        <div class="tbBox">
          已选择{{num}}项，
          <a @click="toggleSelection()">清空</a>
        </div>
      </div>

      <!-- 左table数据栏 -->
      <div>
        <el-table :data="tableData" border style="width: 100%"
         @selection-change="handleSelectionChange"
        >
        
          <!-- 筛选列 -->
          <el-table-column type="selection" width="55"> </el-table-column>


          
          <el-table-column
            align="center"
            v-for="(item, index) in headerData"
            :key="index"
            :prop="item.prop"
            :label="item.label"
            :width="item.width"
            :sortable="item.sortable"
          >
            <template slot-scope="scope">
              <div v-if="item.slot">
                <slot
                  :name="item.prop"
                  v-bind:row="scope.row"
                  v-bind:scope="scope"
                ></slot>
              </div>
              <div v-if="!item.slot">
                {{ tableData[scope.$index][item.prop] }}
              </div>
            </template>
          </el-table-column>
          
        </el-table>
      </div>
    </div>

    <!-- 右表 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      checked: true,
      num: 0,
    };
  },
  props: {
    headerData: {
      type: Array,
      default: () => {
        return [];
      },
    },

    headerDataAdd: {
      type: Array,
      default: () => {
        return [];
      },
    },
    tableData: {
      type: Array,
      default: () => {
        return [];
      },
    },

    stripe: {
      type: Boolean,
      default: () => {
        return true;
      },
    },
    border: {
      type: Boolean,
      default: () => {
        return false;
      },
    },
    maxHeight: {
      type: Number,
      default: () => {
        return 600;
      },
    },
    // 当前第几页
    currentpage: {
      type: Number,
      default: () => {
        return 1;
      },
    },
    // 一页多少条
    pageSize: {
      type: Number,
      default: () => {
        return 10;
      },
    },
    //总条件
    total: {
      type: Number,
      default: () => {
        return 0;
      },
    },
    multipleTable: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  methods: {
    handleSelectionChange(val) {
      this.num = val.length;
      console.log(val.length);
      console.log(val);
      if(val.length){
        this.$emit("delButton", val.length);
      }else{
        this.$emit("delButton", val.length);
      }
      
    },
  },
};
</script>

<style>
.tbBox {
  padding-left: 30px;
  margin-top: 20px;
  margin-bottom: 20px;
  line-height: 35px;
  border: 1px solid #91d5ff;
  background-color: #e6f7ff;
  border-radius: 5px;
}
</style>